<template>
  <div class="user-center-container">
    <!-- 大图展示区域 -->


    <!-- 内容区域 -->
    <div class="content-section">
      <div class="left-content">
        <img :src="getImageSrc(tableData[0]?.imageUrl)" alt="活动主图" v-if="tableData.length > 0" />

        <h1>{{ tableData[0]?.activityName }}</h1>
        <p><strong>类型：</strong> {{ tableData[0]?.activityType }}</p>
        <p><strong>地点：</strong> {{ tableData[0]?.activityLocation }}</p>
        <p><strong>描述：</strong> {{ tableData[0]?.description }}</p>
        <p><strong>开始时间：</strong> {{ tableData[0]?.startTime }}</p>


        <button class="book-button" @click="addFavorite">收藏</button>

      </div>


      <div class="right-recommendations">
        <h2>热门活动</h2>
        <ul>
          <li v-for="(item, index) in recommendedItems" :key="index">
            <img :src="getImageSrc(item.imageUrl)" alt="推荐活动" />
            <p>{{ item.name }}</p>
            <span>{{ item.price }}元</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 评论区域 -->
    <div class="comments-section">
      <h2>评论区</h2>
      <form @submit.prevent="addComment">
        <textarea v-model="newCommentContent" placeholder="请输入评论内容..." required></textarea>
        <button type="submit">发表评论</button>
      </form>
      <ul>
        <li v-for="comment in comments" :key="comment.commentId">
          <p><strong>{{ comment.userId }}：</strong> {{ comment.content }}</p>
          <span>{{ comment.createdAt | formatDate }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import moment from 'moment';

export default {
  name: "UserCenter",
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      activityIdQuery: '',
      selectedIds: [],
      recommendedItems: [
        { imageUrl: 'path/to/image1.jpg', name: '活动1', price: 100 },
        { imageUrl: 'path/to/image2.jpg', name: '活动2', price: 150 },
        { imageUrl: 'path/to/image3.jpg', name: '活动3', price: 200 }
      ],
      newCommentContent: '',
      comments: []
    }
  },
  methods: {
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    load() {
      request.get("/user/selectDetail", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    },
    fetchDataByActivityId(activityId) {
      request.get("/user/selectActivityById", {
        params: {
          activityId: activityId,
          pageNumber: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    fetchComments(activityId) {
      request.get("/user/selectCommentPage", {
        params: {
          activityId: activityId
        }
      }).then(res => {
        this.comments = res.data.list;
      });
    },
    addComment() {
      const comment = {
        userId: 1, // 假设当前用户ID为1，实际应用中应从登录状态获取
        activityId: this.tableData[0]?.activityId,
        content: this.newCommentContent,
        createdAt: new Date()
      };
      request.post("/user/addComment", comment).then(res => {
        if (res.code === '0') {
          this.newCommentContent = '';
          this.fetchComments(this.tableData[0]?.activityId);
        } else {
          alert('评论失败');
        }
      });
    },
    addFavorite() {
      const favorite = {
        userId: 1, // 假设当前用户ID为1，实际应用中应从登录状态获取
        activityId: this.tableData[0]?.activityId
      };
      request.post("/user/addFavorite", favorite).then(res => {
        if (res.code === '0') {
          alert('收藏成功');
        } else {
          alert('收藏失败');
        }
      });
    },
    getImageSrc(imageUrl) {
      try {
        return require(`@/assets/img/${imageUrl}`);
      } catch (error) {
        console.error('Image not found:', imageUrl);
        return ''; // 或者返回一个默认图片路径
      }
    }
  },
  filters: {
    formatDate: function (value) {
      if (value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  },
  created() {
    const activityId = this.$route.params.activityId;
    if (activityId) {
      this.fetchDataByActivityId(activityId);
      this.fetchComments(activityId);
    } else {
      this.load();
    }
  },
  mounted() {
    console.log('Component mounted');
  }
}
</script>

<style scoped>
.user-center-container {
  padding: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: linear-gradient(135deg, #f9f9f9, #eaeaea);
  transition: all 0.3s ease;
}

.user-center-container:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.content-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.left-content {
  flex: 1;
  margin-right: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.left-content:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.left-content h1 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #555;
  font-weight: bold;
}

.left-content p {
  font-size: 16px;
  margin-bottom: 12px;
  color: #666;
}

.book-button {
  background-color: #8b4513;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.book-button:hover {
  background-color: #663300;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.right-recommendations {
  flex: 1;
  max-width: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.right-recommendations:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.right-recommendations h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #555;
  font-weight: bold;
}

.right-recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.right-recommendations li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.right-recommendations li:hover {
  transform: translateY(-2px);
}

.right-recommendations li img {
  width: 80px;
  height: auto;
  border-radius: 8px;
  margin-right: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.right-recommendations li:hover img {
  transform: scale(1.1);
}

.right-recommendations li p {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.right-recommendations li span {
  font-size: 16px;
  color: #8b4513;
  margin-left: auto;
  font-weight: bold;
}

.comments-section {
  margin-top: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.comments-section:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.comments-section h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #555;
  font-weight: bold;
}

.comments-section form {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.comments-section textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 15px;
  resize: none;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.comments-section textarea:focus {
  border-color: #8b4513;
}

.comments-section button {
  background-color: #8b4513;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comments-section button:hover {
  background-color: #663300;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.comments-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comments-section li {
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
  transition: transform 0.3s ease;
}

.comments-section li:hover {
  transform: translateY(-2px);
}

.comments-section li p {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.comments-section li span {
  font-size: 14px;
  color: #999;
  display: block;
  margin-top: 5px;
}
</style>